import React, { useState, useEffect } from "react";
import "./Sleep.css";
import { NavBar } from "@nutui/nutui-react";
import { ArrowLeft } from "@nutui/icons-react";
import { useNavigate } from "react-router-dom";
import { Switch, Picker } from "antd-mobile";
import { ClockCircleOutlined, CaretRightOutlined } from "@ant-design/icons";
import axios from "../../../utils/Index";
export default function Sleep() {
  let Navigate = useNavigate();
  let [flag, setFlag] = useState(false);
  let [visible, setVisible] = useState(false);
  let [visible1, setVisible1] = useState(false);
  let [sleepTime, setSleepTime] = useState([
    { type: "每天", hour: "23", minute: "00" },
  ]);
  let [getupTime, setgetupTime] = useState([
    {
      type: "每天",
      hour: "6",
      minute: "00",
    },
  ]);
  let basicColumns = [
    [
      { label: "工作日", value: "工作日" },
      { label: "每天", value: "每天" },
      { label: "每三天", value: "每三天" },
    ],

    [
      { label: "1", value: "01" },
      { label: "2", value: "02" },
      { label: "3", value: "03" },
      { label: "4", value: "04" },
      { label: "5", value: "05" },
      { label: "6", value: "06" },
      { label: "7", value: "07" },
      { label: "8", value: "08" },
      { label: "9", value: "09" },
      { label: "10", value: "10" },
      { label: "11", value: "11" },
      { label: "12", value: "12" },
      { label: "13", value: "13" },
      { label: "14", value: "14" },
      { label: "15", value: "15" },
      { label: "16", value: "16" },
      { label: "17", value: "17" },
      { label: "18", value: "18" },
      { label: "19", value: "19" },
      { label: "20", value: "20" },
      { label: "21", value: "21" },
      { label: "22", value: "22" },
      { label: "23", value: "23" },
      { label: "24", value: "24" },
    ],
    [
      { label: "0", value: "00" },
      { label: "1", value: "01" },
      { label: "2", value: "02" },
      { label: "3", value: "03" },
      { label: "4", value: "04" },
      { label: "5", value: "05" },
      { label: "6", value: "06" },
      { label: "7", value: "07" },
      { label: "8", value: "08" },
      { label: "9", value: "09" },
      { label: "10", value: "10" },
      { label: "11", value: "11" },
      { label: "12", value: "12" },
      { label: "13", value: "13" },
      { label: "14", value: "14" },
      { label: "15", value: "15" },
      { label: "16", value: "16" },
      { label: "17", value: "17" },
      { label: "18", value: "18" },
      { label: "19", value: "19" },
      { label: "20", value: "20" },
      { label: "21", value: "21" },
      { label: "22", value: "22" },
      { label: "23", value: "23" },
      { label: "24", value: "24" },
      { label: "25", value: "25" },
      { label: "26", value: "26" },
      { label: "27", value: "27" },
      { label: "28", value: "28" },
      { label: "29", value: "29" },
      { label: "30", value: "30" },
      { label: "31", value: "31" },
      { label: "32", value: "32" },
      { label: "33", value: "33" },
      { label: "34", value: "34" },
      { label: "35", value: "35" },
      { label: "36", value: "36" },
      { label: "37", value: "37" },
      { label: "38", value: "38" },
      { label: "39", value: "39" },
      { label: "40", value: "40" },
      { label: "41", value: "41" },
      { label: "42", value: "42" },
      { label: "43", value: "43" },
      { label: "44", value: "44" },
      { label: "45", value: "45" },
      { label: "46", value: "46" },
      { label: "47", value: "47" },
      { label: "48", value: "48" },
      { label: "49", value: "49" },
      { label: "50", value: "50" },
      { label: "51", value: "51" },
      { label: "52", value: "52" },
      { label: "53", value: "53" },
      { label: "54", value: "54" },
      { label: "55", value: "55" },
      { label: "56", value: "56" },
      { label: "57", value: "57" },
      { label: "58", value: "58" },
      { label: "59", value: "59" },
    ],
  ];
  let add = async (value) => {
    await axios.post("/addClock", value);
  };
  return (
    <div id='Sleep' className="animate__animated animate__fadeInDown">
      {/* head */}
      <div id="SleepHead">
        <NavBar
          back={<ArrowLeft />}
          onBackClick={() => {
            Navigate("/app/shou");
          }}
          style={{ background: "#2A6049", color: "white",height:'100%' }}
        >
          <p style={{ color: "white" }}>睡眠</p>
        </NavBar>
      </div>
      {/* clock */}
      <div className="clock"></div>
      {/* time */}
      <div className="time">
        <div className="time1">
          <p>就寝时间</p>
          <p className="time2">
            {sleepTime[sleepTime.length - 1].hour +
              ":" +
              sleepTime[sleepTime.length - 1].minute}
          </p>
          <ClockCircleOutlined
            style={{
              position: "absolute",
              right: "5%",
              bottom: "20%",
              fontSize: "clamp(0.1rem, 7vw, 10rem)",
            }}
            onClick={() => {
              setVisible(true);
            }}
          />
        </div>
        <div className="time1">
          <p>起床时间</p>
          <p className="time2">
            {getupTime[getupTime.length - 1].hour +
              ":" +
              getupTime[getupTime.length - 1].minute}
          </p>
          <ClockCircleOutlined
            style={{
              position: "absolute",
              right: "5%",
              bottom: "20%",
              fontSize: "clamp(0.1rem, 7vw, 10rem)",
            }}
            onClick={() => {
              setVisible1(true);
            }}
          />
        </div>
      </div>
      {/* set */}
      <div className="set">
        <div
          onClick={() => {
            Navigate("/SetTime");
          }}
          style={{ width: "90%" }}
        >
          <p>设置闹钟</p>
        </div>
        <Switch
          checked={flag}
          onChange={() => {
            setFlag(!flag);
          }}
          style={{ "--checked-color": "#2A6049" }}
        />
      </div>
      {/* start */}
      <div className="start">
        <CaretRightOutlined
          style={{
            position: "absolute",
            left: "50%",
            top: "50%",
            transform: "translate(-50%,-50%)",
            fontSize: "clamp(0.1rem, 10vw, 10rem)",
            color: "white",
            background: "#2A6049",
            borderRadius: "100%",
            padding: "10%",
          }}
          onClick={() => {
            Navigate("/gotosleep");
          }}
        />
      </div>
      <div>
        <Picker
          title="设置时间"
          columns={basicColumns}
          visible={visible}
          onClose={() => {
            setVisible(false);
          }}
          value={sleepTime}
          onConfirm={(v) => {
            setSleepTime([
              ...sleepTime,
              { type: v[0], hour: v[1], minute: v[2] },
            ]);
            add({ type: v[0], hour: v[1], minute: v[2] });
          }}
        />
        <Picker
          title="设置时间"
          columns={basicColumns}
          visible={visible1}
          onClose={() => {
            setVisible1(false);
          }}
          value={getupTime}
          onConfirm={(v) => {
            setgetupTime([
              ...getupTime,
              { type: v[0], hour: v[1], minute: v[2] },
            ]);
            add({ type: v[0], hour: v[1], minute: v[2] });
          }}
        />
      </div>
    </div>
  );
}
